<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link  th:href="@{/font-awesome.min.css}" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link  th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link  th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link  th:href="@{/css/style.css}" rel="stylesheet"/>
    <link  th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
    <link  th:href="@{/css/my.css}" rel="stylesheet"/>

    <!--页面样式文件-->
    <link rel="stylesheet"  th:href="@{/dist/css/main.css}">
    <link rel="stylesheet"  th:href="@{/dist/css/media.css}">
</head>
<body class="bd-bg">
<!--右侧主体-->
<div class="order02-contentPart">
    <div class="order02-main">
        <!--搜索区域-->
        <div class="row rowNew">
            <div class="col-sm-12 search-area">
                <form id="formId">
                    <div class="select-list">
                        <ul class="ulForm clearfix">
                            <li class="select-time">
                                <label>选择时间： </label>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" th:value="${beginTime}" id="startTime" placeholder="开始时间"
                                           name="params[beginPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <span>--</span>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" th:value="${endTime}" id="endTime" placeholder="结束时间"
                                           name="params[endPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <div class="btn-outer fl">
                                    <a class="btn btn-primary mlr_8" onclick="reloadIt()"><i
                                            class="fa fa-search"></i>&nbsp;搜索</a>
                                </div>
                            </li>
                            <li class="btn-group">
                                <a class="thisYear btn btn-primary mlr_8">本年</a>
                                <a class="thisMonth btn btn-primary mlr_8">本月</a>
                                <a class="thisDay btn btn-primary mlr_8">本日</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
        <!--统计区域-->
        <div class="row rowNew">
            <div class="statistics-area02">
                <div class="statistics-list clearfix" id="orderStatistics"  >
                    <div class="statistics-item col-xs-6 col-sm-2 col-lg-2" th:each="l,state:${list}">
                        <div th:attr="outputType = *{l.type}" th:class="'main color0'+ ${l.class} ">
                            <div class="indro" th:text="${l.key}">直供</div>
                            <div class="num">
                                <span th:text="${l.value}">34</span>
                                <span th:if="${state.index == 0}" class="unit">kg</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--图表区域-->
        <div class="row rowNew tab-content">
            <div class="col-sm-4 left">
                <div class="echart-item">
                    <div id="leftMain" style="width:100%;height:410px;"></div>
                </div>
            </div>
            <div class="col-sm-8 right">
                <div class="filter-btn">
                    <a class="btn" id="yearBtn">年</a>
                    <a class="btn active" id="monthBtn">月</a>
                    <a class="btn" id="dayBtn">日</a>
                </div>
                <div class="echart-item ">
                    <div id="main" style="width:100%;height:410px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!--echart-->
<script th:src="@{/./dist/libs/echarts/dist/echarts.min.js}"></script>

<!-- 遮罩层 -->
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/my-common-js.js}"></script>


<script>
    $(function(){

    });
</script>
<script th:inline="javascript">
    var ctx = [[@{
        /}]];
        // 基于准备好的dom，初始化echarts实例
        var currentSortList = ['共计总量', '直供', '内销一', '内销二', '内销三', '内销四']
        var currentSort = '共计总量'
        var timeSort = 2;//月份

        /**
         * 设置柱状图的数据(参数用于获取数据)
         * @param sortIdx:共计订单/直供/内销一/内销二
         * @param timeSort:年月日
         */
    function setBarData(sortIdx,timeSort,x,y) {


        // 调用方法获取数据
            // 调用方法获取数据
            var xData = ['09', '10', '11', '12', '01', '02', '03', '04', '05', '06', '07', '08'];
            var yData = [320, 220, 240, 160, 120, 204, 280, 240, 190, 110, 210, 210];
            if (x && y) {
                xData = x;
                yData = y;
            }
        var myChart = echarts.init(document.getElementById('main'));
        var option01 = {
            title: {
                text: '鸡供应数量统计表',
                x: 'center',
                textStyle:{
                    fontSize:32,
                    color:'#2d353e'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                textStyle:{
                    fontSize:22
                }
            },
            grid:{
                top:'21%',
                bottom:'7%',
                left:'7%',
                right:'5%'
            },
            xAxis: {
                name:'月',
                nameTextStyle:{
                    color: '#a1a4a8',
                    fontSize: 20,
                },
                data: xData,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#f3f6fa'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#a3abb4',
                        fontSize: 20,
                    }
                },
            },
            yAxis: {
                name: 'kg',
                nameTextStyle:{
                    color: '#a1a4a8',
                    fontSize: 20,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#f3f6fa'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#f3f6fa'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#a3abb4',
                        fontSize: 20,
                    }
                },
            },
            series: {
                name:'数量（kg）',
                type: 'bar',
                barWidth: 18,
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#4cb3db' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#3d7ee0' // 100% 处的颜色
                        }], false)
                    }
                },
                itemStyle: {
                    normal: {
                        barBorderRadius:[9, 9, 0, 0],
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#60c5ff' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#428af5' // 100% 处的颜色
                        }], false)
                    }
                },
                data: yData
            }
        };
        myChart.setOption(option01);
    }
    setBarData(currentSort,'year')

    // 饼状图高亮下标
    var currentSortIndx = -1
        var outputType=1
        $('#yearBtn').click(function () {
            timeSort = 1;
            $(this).addClass('active').siblings().removeClass('active')
            initEchart()
            // setBarData(currentSort, 'year')
        })


        $('#monthBtn').click(function () {
            timeSort = 2;
            $(this).addClass('active').siblings().removeClass('active')
            console.log(currentSort)
            initEchart()
            // setBarData(currentSort, 'month')
        })


        $('#dayBtn').click(function () {
            timeSort = 3;
            $(this).addClass('active').siblings().removeClass('active')
            initEchart();
            // setBarData(currentSort, 'day')
        })

        // 饼状图
        var myChart00 = echarts.init(document.getElementById('leftMain'));
       var pieData = [];


        var temp = [[${list}]];
        $.each(temp, function (i, e) {
            if (i > 0) {
                var o = {value: e.value, name: e.key}
                pieData.push(o);
            }
        })

        var option00 = {
        legend: {
            orient: "vartical",
            right:'4%',
            bottom: "16%",
            itemWidth: 20,
            itemHeight: 15,
            textStyle:{
                fontSize:16,
                color:'#7c8b92'
            },
            itemGap :15,
            selectedMode:false
        },
        title: {
            text: '鸡供应数量比例图',
            x: 'center',
            textStyle:{
                fontSize:32,
                color:'#2d353e'
            }
        },
        tooltip: {
            trigger: 'item',
            // formatter: "{a} <br/>{b}:({d}%)"
        },
        series:  {
            name: '',
            type: 'pie',
            center: ['35%', '57%'],
            radius: ['42%', '76%'],
            color: ['#a781ff', '#5ad6ff', '#ffba60', '#749fff', '#8eff73'],
            label: {
                normal: {
                    position: 'inner',
                    formatter: '{d}%',
                    textStyle:{
                        fontSize:20
                    }
                }
            },
            itemStyle: { //图形样式
                normal: {
                    borderColor: '#ffffff',
                    borderWidth: 2,
                },
            },
            data: pieData
        }
    };
    myChart00.setOption(option00);
    // 切换"共计订单"、"直供"
    $("#orderStatistics .statistics-item").each(function (index) {
        var _idx = index
        $(this).children(".main").eq(0).click(function () {

            currentSort = currentSortList[_idx]
            // 设置柱状图数据
            setBarData(currentSort,'year')

            $(this).addClass("active").parent().siblings().children(".main").removeClass("active");

            // 饼状图高亮
            myChart00.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: currentSortIndx
            });
            if (_idx>0){
                currentSortIndx = _idx-1
            }else{
                currentSortIndx = -1
            }
            myChart00.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex:currentSortIndx
            });

        })
    })

    //检测鼠标移入后显示之前默认高亮的那块
    myChart00.on('mouseover', function(e) {
        // 移除默认高亮
        myChart00.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex:currentSortIndx
        });
    })
    //检测鼠标移出后显示之前默认高亮的那块
    myChart00.on('mouseout', function(e) {
        // 移除所有高亮
        myChart00.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: option00.series.data.length
        });
        // 高亮选中部分
        myChart00.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex:currentSortIndx
        });
    });

        function reloadIt() {
            var link = ctx + "system/ncOutputChicken/chicken";
            var s = $('#startTime').val();
            var e = $('#endTime').val();
            link += "?beginTime=" + s + "&endTime=" + e;
            window.location.href = link;
        }
        $(".main").click(function () {
                outputType = $(this).attr('outputType');
               initEchart()
                return;
                $(".main").removeClass("active");
                $(this).addClass("active");
                var link = ctx + 'system/ncOutputChicken/chicken?type=' + $(this).attr('outputType');

                var s = $('#startTime').val();
                var e = $('#endTime').val();

                link += "&beginTime=" + s + "&endTime=" + e;

                $.modal.openTab("鸡舍列表", link);
            }
        );

        $('.thisYear').click(function () {
            $('#startTime').val(new Date().getFullYear() + "-01-01");
            reloadIt();
        });

        $('.thisMonth').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m + "-01");
            reloadIt();
        });
        $('.thisDay').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m +"-"+ new Date().getDate());
            reloadIt();
        });
       initEchart();

        function initEchart() {
            var url = ctx + "system/ncOutputChicken/chickenQuery";
            var data = {
                beginTime: $('#startTime').val(),
                endTime: $('#endTime').val(),
                outputType:outputType,
                dataSpan: timeSort
            };

            myPost(url, data, function (data) {
                if (data.code == 0) {
                    var x = [];
                    var y = [];
                    $(data.rows).each(function (i, e) {
                        x.push(e.x);
                        y.push(e.count);
                    });

                    setBarData(currentSort, 'year', x, y);
                }

            }, function () {

            })
        }
        setFrontTimeShortcutBtns([[${beginTime}]], [[${endTime}]]);
        setTitle("鸡舍管理",false)
</script>
</body>
</html>
